import { useEffect, useState } from "react"
import { CommentItem as Comment } from "../../Types/Api/comment"
import { User } from "../../Types/Api/user"
import style from "./index.module.css"
import { reqGetUserById } from "../../api/user"
type Props = {
  info: Comment
}
export const CommentItem = ({ info }: Props) => {
  const [user, setUser] = useState<User>()
  const getUser = async () => {
    const { data: user } = await reqGetUserById(info.userId)
    setUser(user)
  }
  useEffect(() => {
    getUser()
  }, [])
  return (
    <div className={style.wrapper}>
      <img src={import.meta.env.VITE_APP_BASE_SERVICE + user?.avatar} />
      <div className={style.right}>
        <div className={style.date}>
          {new Date(+info.commentDate!).toLocaleDateString()}
        </div>
        <div
          className={style.content}
          dangerouslySetInnerHTML={{ __html: info.commentContent }}
        ></div>
      </div>
    </div>
  )
}
